<template>
<div class="imgtxt-edit views-container">
    <el-dialog @close="resetDialogFormData" :visible.sync="dialogTableVisible" custom-class="reset-pwd wlm-form-dialog dialog-table">
        <div class="wlm-form" v-if="dialogTableVisible">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">添加素材</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <div class="wlm-form-content">
                    <div class="wlm-dialog-main">
                        <div class="wlm-dialog-content">
                            <div class="tips">
                                <p>可用变量：</p>
                                <p>[$name]：微信昵称</p>
                                <p>[$time]：时间</p>
                                <!-- <p>[$province]：省份位置(打开公众号回复可用)</p>
                                <p>[$city]：城市位置(打开公众号回复可用)</p>
                                <p>[$district]：区县位置(打开公众号回复可用)</p>
                                <p>注意：地理位置变量仅打开公众号回复可用</p> -->
                            </div>
                            <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                                <el-form-item label="类型" prop="class">
                                    <el-select size="small" v-model="formFormatData.formData.class">
                                        <el-option label="图文" value="1">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="标题" prop="title">
                                    <el-input placeholder="请输入消息标题" v-model.trim="formFormatData.formData.title">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="描述" prop="describe">
                                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入消息描述" v-model.trim="formFormatData.formData.describe">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="链接" prop="url">
                                    <el-input placeholder="请输入消息链接" v-model.trim="formFormatData.formData.url">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="图片" prop="merchantlog" ref="merchantlog">
                                    <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                                    <div class="form-help">建议尺寸400*400</div>
                                </el-form-item>
                                <el-form-item label="排序" prop="sort">
                                    <el-input placeholder="请输入排序" v-model.trim="formFormatData.formData.sort">
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" type="primary" @click="formFormatSubmit">确定</el-button>
        </footer>
    </el-dialog>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <el-button size="small" type="primary" @click="dialogTableVisible=true">添加素材</el-button>
        </div>
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column label="排序">
                    <template slot-scope="scope">
                        <span>{{scope.row.sort}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="图片">
                    <template slot-scope="scope">
                        <img v-if="scope.row.img.length>0" :src="scope.row.img[0]['file_path']" height="50" width="50">
                    </template>
                </el-table-column>
                <el-table-column label="标题">
                    <template slot-scope="scope">
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="链接">
                    <template slot-scope="scope">
                        <span>{{scope.row.url}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        <p>{{scope.row.create_time}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="推送">
                    <template slot-scope="scope">
                        <p>{{scope.row.send_num}}</p>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="已读">
                    <template slot-scope="scope">
                        <p>{{scope.row.create_time}}</p>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="已购">
                    <template slot-scope="scope">
                        <p>{{scope.row.create_time}}</p>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <el-button class="wlm-text" type="text" @click="formFormatDialogEditEvt({id:scope.row.material_id, toggle:'dialogTableVisible'})">编辑</el-button>
                            <div class="btn-line"></div>
                            <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.material_id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  materialIndex,
  materialDel,
  materialSave,
  materialDetail
} from '@/api/application'
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'ImgtxtEdit',
  components: {
    ChooseFiles
  },
  data() {
    return {
      blogTitle: '',
      dialogTableVisible: false,
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'img',
          model: 'img',
          validateField: 'merchantlog'
        }
      },
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: materialDetail,
            params: {
              id: ''
            },
            redirect: 'material_id',
            filters: {
              img: {
                bindInit: ['chooseLogoConfig']
              }
            }
          },
          submitForm: materialSave
        },
        formData: {
          class: '1',
          title: '',
          material_id: '',
          imgtext_id: this.$route.query.imgtext_id,
          describe: '',
          url: '',
          img: [],
          sort: ''
        },
        rules: {

        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: materialIndex,
            delList: materialDel
          },
          tableData: [],
          files: {
            ids: [],
            checkall: '0',
            redirect: 'material_id',
            Recycle: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.imgtxt-edit {
    .tips {
        padding: 2px 20px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        margin-bottom: 20px;
        border-radius: 4px;
        font-size: 14px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    }
}
</style>
